import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { DualAxes } from '@ant-design/plots';

const BestComparison = () => {
  const uvBillData = [
    {
      className: '一班',
      value: 55,
      type: '班级',
    },
    {
      className: '二班',
      value: 65,
      type: '班级',
    },
    {
      className: '三班',
      value: 45,
      type: '班级',
    },
    {
      className: '四班',
      value: 67,
      type: '班级',
    },
    {
      className: '五班',
      value: 47,
      type: '班级',
    },
    {
      className: '六班',
      value: 30,
      type: '班级',
    },
  ];
  const transformData = [
    {
      className: '一班',
      count: 66,
      name: '历史最高绩点',
    },
    {
      className: '二班',
      count: 66,
      name: '历史最高绩点',
    },
    {
      className: '三班',
      count: 66,
      name: '历史最高绩点',
    },
    {
      className: '四班',
      count: 66,
      name: '历史最高绩点',
    },
    {
      className: '五班',
      count: 66,
      name: '历史最高绩点',
    },
    {
      className: '六班',
      count: 66,
      name: '历史最高绩点',
    },
    {
      className: '一班',
      count: 20,
      name: '历史最低绩点',
    },
    {
      className: '二班',
      count: 20,
      name: '历史最低绩点',
    },
    {
      className: '三班',
      count: 20,
      name: '历史最低绩点',
    },
    {
      className: '四班',
      count: 20,
      name: '历史最低绩点',
    },
    {
      className: '五班',
      count: 20,
      name: '历史最低绩点',
    },
    {
      className: '六班',
      count: 20,
      name: '历史最低绩点',
    },
    {
      className: '',
      count: 0,
      name: '',
    },
  ];
  const config = {
    data: [uvBillData, transformData],
    xField: 'className',
    yField: ['value', 'count'],
    yAxis: {
      count: {
        tickCount: 10,
      },
    },
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.5,
      },
      {
        geometry: 'line',
        seriesField: 'name',
        lineStyle: ({ name }) => {
          if (name === '历史最低绩点') {
            return {
              lineDash: [1, 4],
              opacity: 1,
            };
          }
          return {
            opacity: 0.5,
          };
        },
      },
    ],
  };
  return <DualAxes {...config} />;
};

export default BestComparison;
